// 获取相关元素
const menuPopup = document.getElementById('menuPopup');
const area = document.getElementById('Area');
const changeNicknameBtnPopup = document.getElementById('change-nickname-btn-popup');
const nicknamePopupContainer = document.getElementById('nickname-popup-container');
const cancelBtn = document.getElementById('cancel-btn');
const saveBtn = document.getElementById('save-btn');
const nicknameInput = document.getElementById('nickname-input');
const nicknameLength = document.getElementById('nickname-length');
const exitBtn = document.getElementById('exitBtn');
const exitPopup = document.getElementById('exitPopup');
const cancelExitBtn = document.getElementById('cancelExitBtn');
const confirmExitBtn = document.getElementById('confirmExitBtn');
const inviteModal = document.getElementById('inviteModal');
const closeBtn = document.getElementsByClassName('close')[0];
const chatInput = document.getElementById('chat-input');
const sendButton = document.getElementById('send-button');
const chatMessages = document.getElementById('chat-messages');

// 连接到Socket.io服务器
const socket = io('http://localhost:3000');

// 显示菜单弹窗函数
function toggleMenu(event) {
    if (menuPopup.style.display === 'block') {
        menuPopup.style.display = 'none';
    } else {
        menuPopup.style.display = 'block';
        const areaRect = area.getBoundingClientRect();
        menuPopup.style.left = areaRect.right + 'px';
        menuPopup.style.top = areaRect.top + 'px';

        menuPopup.addEventListener('mouseleave', function () {
            menuPopup.style.display = 'none';
        });
    }
}

// 显示昵称弹窗函数
function showNicknamePopup() {
    nicknamePopupContainer.style.display = 'flex';
}

// 隐藏昵称弹窗函数
function hideNicknamePopup() {
    nicknamePopupContainer.style.display = 'none';
}

// 点击取消按钮时隐藏昵称弹窗
cancelBtn.addEventListener('click', hideNicknamePopup);

// 点击保存按钮时，设置昵称并发送给服务器
saveBtn.addEventListener('click', function () {
    const newNickname = nicknameInput.value;
    socket.emit('setNickname', newNickname);
    console.log('新昵称：', newNickname);
    hideNicknamePopup();
});

// 实时更新昵称输入长度提示
nicknameInput.addEventListener('input', function () {
    const length = nicknameInput.value.length;
    nicknameLength.textContent = `${length}/10`;
});

// 为菜单中的“我在本域的昵称”按钮添加点击事件
if (changeNicknameBtnPopup) {
    changeNicknameBtnPopup.addEventListener('click', showNicknamePopup);
}

// 点击“xxx的域”旁边的三个点，弹出和隐藏菜单
area.addEventListener('click', toggleMenu);

// 监听服务器发送的新消息
socket.on('newMessage', (data) => {
    const li = document.createElement('li');
    li.innerHTML = `<span>${data.nickname} ${new Date().toLocaleString()}</span><p>${data.message}</p>`;
    chatMessages.appendChild(li);
    chatMessages.scrollTop = chatMessages.scrollHeight;
});

// 监听用户加入
socket.on('userJoined', (data) => {
    console.log(`${data.nickname} 加入了聊天`);
});

// 监听用户离开
socket.on('userLeft', (data) => {
    console.log(`${data.nickname} 离开了聊天`);
});

// 发送聊天消息
sendButton.addEventListener('click', function () {
    const message = chatInput.value;
    if (message.trim() !== '') {
        socket.emit('chatMessage', message);
        chatInput.value = '';
    }
});

// 显示退出域弹窗
exitBtn.addEventListener('click', function () {
    exitPopup.style.display = 'flex';
});

// 点击取消退出域按钮隐藏弹窗
cancelExitBtn.addEventListener('click', function () {
    exitPopup.style.display = 'none';
});

// 点击确认退出域按钮（这里添加实际的退出域逻辑，此处仅做简单示例）
confirmExitBtn.addEventListener('click', function () {
    console.log('执行退出域操作');
    exitPopup.style.display = 'none';
});

// 显示邀请弹窗
function showInviteModal() {
    inviteModal.style.display = 'block';
}

// 当用户点击关闭按钮时，关闭邀请弹窗
closeBtn.onclick = function () {
    inviteModal.style.display = "none";
};

// 当用户点击弹窗外部时，关闭邀请弹窗
window.onclick = function (event) {
    if (event.target == inviteModal) {
        inviteModal.style.display = "none";
    }
};

// 复制链接到剪贴板的函数
function copyLink() {
    var inviteLink = document.getElementById('inviteLink');
    inviteLink.select();
    inviteLink.setSelectionRange(0, 99999);
    document.execCommand('copy');
    alert('邀请链接已复制到剪贴板！');
}